<template>
	
	<NavBar :obj="{ title: '平台公告', color: '#000', backgroundColor: '#fff'}" />

	<view class="fill">
		<view class="item flex justify-between" v-for="(item, index) in list" @click="goUrl('/pages/news/info?id=' + item.id)">
			<view class="left flex flex-col justify-between flex-1">
				<view class="title line-1-clamp">{{ item.title }}</view>
				<view class="desc line-2-clamp">{{ item.describe }}</view>
				<view class="flex items-center">
					<view class="divs flex items-center">
						<up-icon name="clock" color="#999999" size="15"></up-icon>
						<text>{{ item.create_time }}</text>
					</view>
					
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, goUrl, hint } from '../../service/port';
	import { onShow, onReachBottom } from '@dcloudio/uni-app';

	const list = ref([]);
	const page = ref(1);

	async function getNews() {
		let res = await port('getNews', { page: page.value });
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}

	onShow(() => {
		page.value = 1;
		list.value.length = 0;
		getNews();
	});

	onReachBottom(() => {
		getNews();
	});
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	.img-top {
		width: 100%;
		height: 350rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.fill {
		position: relative;
		
		.item {
			background: #ffffff;
			border-radius: 18rpx;
			padding: 29rpx 25rpx;
			margin: 24rpx 30rpx;
			.left {
				margin-right: 27rpx;
				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
				.desc{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin: 30rpx 0;
				}
				.divs {
					> text {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-left: 5rpx;
					}

					&:first-child {
						margin-right: 36rpx;
					}
				}
			}
			.icon {
				width: 248rpx;
				height: 168rpx;
				border-radius: 18rpx;
			}
		}
	}
</style>
